<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: width 1s ease-in-out, height 2s linear,background-color 3s linear, transform 2s linear;

           /* transition-property: width,height,background-color,transform ;
            transition-duration: 1s,2s,3s,2s;
            transition-timing-function : ease-in-out; !*linear匀速，ease先慢后快*!
            transition-delay : 1s;*/

        }
        /*.box:hover {*/
            /*width: 300px;*/
            /*height: 300px;*/
            /*background-color: #303ab9;*/
        /*}*/

        .transition {
            width: 400px;
            height: 400px;
            background-color: #3f983f;
            transform : rotate(360deg);
            /*transform: translateX(50%);*/
        }
    </style>
</head>
<body>
    <a href="https://blog.csdn.net/qq_43923146/article/details/127510036">CSS transition（过渡效果）详解</a>

    <div class="box"></div>
    <button onclick="toggleTransition()">Toggle Transition</button>

    <script>
        function toggleTransition() {
            const element = document.querySelector('.box');
            element.classList.toggle('transition');
        }
    </script>
</body>
</html>